<template>
  <div class="login">
    <div class="login_info">
      <div class="login_title">
        <img src="@/assets/img/logo1.png" alt="" />
        <div class="logo_text">蓝精灵电影-登录</div>
      </div>
      <div class="login_form">
        <p>UserName</p>
        <el-input v-model="userName" placeholder="请输入帐号"></el-input>
        <p>Password</p>
        <el-input
          v-model="password"
          placeholder="请输入密码"
          show-password
        ></el-input>
        <div class="manager">
          <el-link class="login_link" href="/w_login" :underline="false">我是客服人员</el-link>
        </div>
        <div class="forget">
          <el-tooltip
            class="item"
            effect="dark"
            content="请联系管理员"
            placement="bottom"
          >
            <el-link class="login_link" :underline="false">忘记密码？</el-link>
          </el-tooltip>
        </div>
        <div class="btn">
          <el-button
            class="login-form-button"
            type="primary"
            @click="loginClick()"
            >SIGN IN</el-button
          >
        </div>
        <div class="login_footer">
          <el-link class="register" :underline="false" href="/register"
            >还没注册帐号？去注册
            <i class="el-icon-right"></i>
          </el-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Login } from "@/api/user.js";
export default {
  data() {
    return {
      userName: "",
      password: "",
    };
  },
  // mounted:{

  // },
  methods: {
    // loginClick(){
    //     window.location="/"
    // }
    loginClick() {
      const LoginData = {
        username: this.userName,
        password: this.password,
      };

      Login(LoginData).then((res) => {
        if (res.code == 200) {
          if (res.data.success === "success") {
            localStorage.setItem("token", res.data.token);
            localStorage.setItem("uid", res.data.user.id);
            this.$message({
              message: res.data.msg,
              type: "success",
            });
            this.$router.push("/home");
          } else {
            this.$message({
              message: res.data.msg,
              type: "warning",
            });
          }
        }else {
            this.$message({
              message: res.data.msg,
              type: "warning",
            });
          }
      });

      // this.$axios
      //   .post(this.$store.state.url + "/api/user/login", LoginData)
      //   .then((res) => {
      //     if(res.data.success==true){
      //       this.$message({
      //         message:"登陆成功",
      //         type:"success",
      //       });
      //       localStorage.setItem("token",res.data.data.token);
      //       localStorage.setItem("uid",res.data.data.user.id);
      //       this.$router.push("/home")
      //     }
      //   });
    },
  },
};
</script>

<style lang="scss" scoped>
.login {
  width: 100%;
  height: 100%;
  .login_info {
    width: 500px;
    margin: 50px auto;
    .login_title {
      height: 75px;
      img {
        width: 75px;
        height: 75px;
        float: left;
        margin-left: 20px;
      }
      .logo_text {
        float: left;
        line-height: 75px;
        font-size: 30px;
        font-weight: bold;
        margin-left: 50px;
      }
    }
    .login_form {
      height: 40px;
      line-height: 40px;
      font-weight: bold;
      color: #91949c;
      font-size: 16px;
      .manager{
        float: left;
        margin: 0 0 20px 0;
        .login_link {
          font-size: 16px;
          color: #91949c;
          font-weight: bold;
        }
      }
      .forget {
        float: right;
        margin: 0 0 20px 0;
        .login_link {
          font-size: 16px;
          color: #91949c;
          font-weight: bold;
        }
      }
      .btn {
        clear: both;
        .login-form-button {
          width: 100%;
          height: 50px;
          font-weight: bold;
          font-size: 16px;
        }
      }
      .login_footer {
        text-align: center;
        .register {
          height: 50px;
          line-height: 50px;
          font-weight: bold;
          text-align: center;
        }
      }
    }
  }
}

// .login {
//   width: 100%;
//   height: 100%;
// }
// .login .login_info {
//   width: 500px;
//   margin: 50px auto;
// }
// .login_title {
//   height: 75px;
// }
// .login_title img {
//   width: 75px;
//   height: 75px;
//   float: left;
//   margin-left: 20px;
// }
// .logo_text {
//   float: left;
//   line-height: 75px;
//   font-size: 30px;
//   font-weight: bold;
//   margin-left: 50px;
// }
// .login_form {
//     height: 40px;
//     line-height: 40px;
//   font-weight: bold;
//   color: #91949c;
//   font-size: 16px;
// }
// .forget {
//   float: right;
//   margin: 20px 0;
// }
// .forget .login_link {
//   font-size: 16px;
//   color: #91949c;
// }
// .login_form .btn {
//   clear: both;
// }
// .login-form-button {
//   width: 100%;
//   font-weight: bold;
//   font-size: 16px;
// }
// .login_footer {
//   text-align: center;
// }
// .login_footer .register {
//   height: 50px;
//   line-height: 50px;
//   font-weight: bold;
// }
</style>